<!--  用户列表-->
<template>
  <div class="user">
    <Crumbs />
    <main class="user_content">
      <section class="search">
        <div class="search_header">
          <div class="search_header_l">
            <el-icon><Search /></el-icon><span>筛选搜索</span>
          </div>
          <div class="search_header_r">
            <el-button @click="Reset">重置</el-button>
            <el-button type="primary" @click="searchUser">查询结果</el-button>
          </div>
        </div>
        <section class="search_content">
          <ul class="search_list">
            <li class="search_item">
              <span>账号/姓名:</span>
              <el-input placeholder="请输入账号、姓名" v-model="keyword" />
            </li>
          </ul>
        </section>
      </section>
      <DataList @showPopup="addRoleFn" />
      <el-table :data="adminDataList" border class="userDataTable">
        <el-table-column prop="id" label="编号" width="60" align="center" />
        <el-table-column prop="username" label="账号" align="center" />
        <el-table-column prop="nickName" label="姓名" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column label="添加时间" align="center">
          <template #default="scope">
            {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:MM:SS') }}
          </template>
        </el-table-column>
        <el-table-column label="最后登录" align="center">
          <template #default="scope">
            {{
              scope.row.loginTime
                ? moment(scope.row.loginTime).format('YYYY-MM-DD HH:MM:SS')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus(row.status, row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              text
              type="primary"
              size="small"
              @click="showRoleFn(row.id)"
              v-permission="'allocRole'"
              >分配角色</el-button
            >
            <el-button
              text
              type="primary"
              size="small"
              @click="ShowEditFn(row)"
              v-permission="'editUser'"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <section class="paging">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagingbox"
        >
          <template #default="scope"></template>
        </el-pagination>
      </section>
    </main>
    <EditPopup
      :isShowPopup="isShowPopup"
      @hidden="() => hideEditFn()"
      :adminObj="adminObj"
      :message="message"
    />
    <RolePopup
      :isShowRolePopup="isShowRolePopup"
      @rolehidden="hideRoleFn"
      :roleId="roleId"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, Ref } from 'vue';
import Crumbs from '../../components/Common/Crumbs.vue';
import DataList from '../../components/Common/DataList.vue';
import EditPopup from './components/EditPopup.vue';
import RolePopup from './components/RolePopup.vue';
import { ElMessage } from 'element-plus';
import {
  GetAdminListApi,
  UpdateStatusApi,
  GetAppointUserApi,
  updateRoleApi,
} from '../../request/api';
import moment from 'moment';
import router from '../../router';
// 搜索框keyword
let keyword = ref('');
// 表格数据源
const adminDataList = ref([]);
let total = ref(0);
let currentPage = ref(1);
let pageSize = ref(5);
// 每页显示个数change事件
const handleSizeChange = (size: number) => {
  req('', currentPage.value, pageSize.value);
};
// 分页change事件
const handleCurrentChange = (page: number) => {
  req('', currentPage.value, pageSize.value);
};
// 初次请求函数
function req(keyword: string = '', pageNum: number = 1, pageSize: number = 5) {
  GetAdminListApi({
    keyword,
    pageNum,
    pageSize,
  }).then((res) => {
    if (res.code == 200) {
      adminDataList.value = res.data.list;
      total.value = res.data.total;
    }
  });
}
req();
// 弹出框逻辑

// 是否显示编辑弹框
let isShowPopup = ref(false);
// 用户信息
let adminObj = ref({}) as Ref<AdmininfoType>;
// 增加角色传过来的message
let message = ref('');
// 编辑点击事件
const ShowEditFn = (params: AdmininfoType) => {
  isShowPopup.value = true;
  adminObj.value = params;
  message.value = '';
};
// 添加角色
const addRoleFn = (flag: string) => {
  isShowPopup.value = true;
  message.value = flag;
  adminObj.value = {
    createTime: '',
    icon: '',
    loginTime: '',
    email: '',
    id: 0,
    nickName: '',
    note: '',
    password: '',
    username: '',
    status: 0,
  };
};

const hideEditFn = (val?: string) => {
  isShowPopup.value = false;
  if (val == 'reloadTable') {
    req('', currentPage.value, pageSize.value);
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
  }
};

// 修改用户的状态
const changeStatus = (status: number, id: number) => {
  UpdateStatusApi({
    status,
    id,
  }).then((res) => {
    if (res.code == 200) {
      // console.log(res);
    }
  });
};
// 搜索用户名事件
const searchUser = () => {
  GetAppointUserApi({
    keyword: keyword.value,
    pageNum: 1,
    pageSize: 5,
  }).then((res) => {
    if (res.code == 200) {
      // console.log(res);
      adminDataList.value = res.data.list;
    }
  });
};
// 重置按钮事件
const Reset = () => {
  req();
  keyword.value = '';
};
// 是否显示分配角色弹框
let isShowRolePopup = ref(false);
let roleId = ref(0);
const showRoleFn = (id: number) => {
  // console.log(id);
  isShowRolePopup.value = true;
  roleId.value = id;
};
const hideRoleFn = () => {
  isShowRolePopup.value = false;
};

//
</script>
<style lang="less" scoped>
.user {
  // width: 100%;
  .user_content {
    padding: 10px 20px;
    box-sizing: border-box;
    .search {
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      margin-top: 20px;
      .search_header {
        display: flex;
        justify-content: space-between;
      }
      .search_content {
        margin-top: 20px;
        .search_list {
          margin-left: 100px;
          .search_item {
            margin-bottom: 20px;
            span {
              width: 85px;
              margin-right: 10px;
            }
            :deep(.el-input) {
              width: 250px;
              height: 40px;
            }
          }
        }
      }
    }
    .userDataTable {
      width: 100%;
      margin-top: 30px;
    }
    .paging {
      margin-top: 30px;
      width: 100%;
      .pagingbox {
        float: right;
      }
    }
  }
}
</style>
